<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header>
        <div class="header-wrapper">
          <div class="header-content">
            <div class="logo">
              <span class="logo-text">沐影AI</span>
            </div>

            <!-- PC端菜单 -->
            <el-menu
                v-if="!isMobile"
                mode="horizontal"
                background-color="transparent"
                text-color="#ffffff"
                active-text-color="#ffdd57"
                router
            >
              <el-menu-item index="/">
                <el-icon><Histogram /></el-icon>降AIGC率
              </el-menu-item>
              <el-menu-item index="/detect">
                <el-icon><Search /></el-icon>查重
              </el-menu-item>
              <el-menu-item index="/login">
                <el-icon><User /></el-icon>登录
              </el-menu-item>
              <el-menu-item index="/history" class="history-menu-item">
                <el-icon><Clock /></el-icon>历史记录
              </el-menu-item>
              <!-- 根据角色显示邀请码管理页面 -->
              <el-menu-item
                v-if="userRole === 'ADMIN'"
                index="/invitation-code-management"
                style="color: #000000 !important; font-weight: 600; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);">
              <el-icon><Ticket /></el-icon>邀请码管理
            </el-menu-item>
              <!-- 新增文件管理页面导航项 -->
              <el-menu-item
                  v-if="userRole === 'ADMIN'"
                  index="/file-management"
                  style="color: #000000 !important; font-weight: 600; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);">
                <el-icon><Document /></el-icon>文件管理
              </el-menu-item>
              <!-- 新增用户管理页面导航项 -->
              <el-menu-item
                  v-if="userRole === 'ADMIN'"
                  index="/user-management"
                  style="color: #000000 !important; font-weight: 600; text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);">
                <el-icon><User /></el-icon>用户管理
              </el-menu-item>
            </el-menu>

            <!-- 移动端菜单按钮 -->
            <div v-else class="mobile-menu-toggle" @click="toggleMobileMenu">
              <el-icon v-if="showMobileMenu"><Close /></el-icon>
              <el-icon v-else><Menu /></el-icon>
            </div>
          </div>
        </div>

        <!-- 移动端菜单抽屉 -->
        <div class="mobile-menu" v-if="isMobile && showMobileMenu">
          <el-menu
              mode="vertical"
              background-color="#2d3437"
              text-color="#ffffff"
              active-text-color="#ffdd57"
              router
              @select="closeMobileMenu"
          >
            <el-menu-item index="/">
              <el-icon><Histogram /></el-icon>降AIGC率
            </el-menu-item>
            <el-menu-item index="/detect">
              <el-icon><Search /></el-icon>查重
            </el-menu-item>
            <el-menu-item index="/login">
              <el-icon><User /></el-icon>登录
            </el-menu-item>
            <el-menu-item index="/history" class="history-menu-item">
              <el-icon><Clock /></el-icon>历史记录
            </el-menu-item>
            <!-- 根据角色显示邀请码管理页面 -->
            <el-menu-item v-if="userRole === 'ADMIN'" index="/invitation-code-management">
              <el-icon><Ticket /></el-icon>邀请码管理
            </el-menu-item>

            <!-- 新增文件管理页面导航项 -->
            <el-menu-item v-if="userRole === 'ADMIN'" index="/file-management">
              <el-icon><Document /></el-icon>文件管理
            </el-menu-item>
            <!-- 新增用户管理页面导航项 -->
            <el-menu-item v-if="userRole === 'ADMIN'" index="/user-management">
              <el-icon><User /></el-icon>用户管理
            </el-menu-item>
          </el-menu>

        </div>
      </el-header>

      <!-- 在线客服图标 -->
      <div class="customer-service-container">
        <div class="service-hint">有任何问题请咨询客服！</div>
        <div class="online-customer-service" @click="toggleService">
          <div class="service-icon">
            <el-icon v-if="showService"><Close /></el-icon>
            <el-icon v-else><Service /></el-icon>
          </div>
          <div class="pulse-ring"></div>
          <div class="tooltip">在线客服</div>
        </div>
      </div>

      <!-- 客服组件 -->
      <CustomerService v-model="showService" />

      <!-- 主要内容区 -->
      <el-main>
        <router-view />
      </el-main>

      <!-- 页脚 -->
      <el-footer>
        <div class="footer-content">
          <p>
            西安沐影信息技术有限责任公司|
            <a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2025065894号-1</a>
          </p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import CustomerService from './components/views/CustomerService.vue'
import {
  Histogram, Search, Clock, User,
  Service, Close, Menu
} from '@element-plus/icons-vue'

export default {
  name: 'App',
  components: {
    CustomerService,
    Histogram, Search, Clock, User, Service, Close, Menu
  },
  setup() {
    const showService = ref(false)
    const logo = ref(true)
    const isMobile = ref(false)
    const showMobileMenu = ref(false)
    const userRole = ref(sessionStorage.getItem('role'));

    const toggleService = () => {
      showService.value = !showService.value
      console.log('客服窗口状态:', showService.value ? '已打开' : '已关闭')
    }

    const toggleMobileMenu = () => {
      showMobileMenu.value = !showMobileMenu.value
    }

    const closeMobileMenu = () => {
      showMobileMenu.value = false
    }

    const checkScreenSize = () => {
      isMobile.value = window.innerWidth < 768
    }

    // 监听窗口大小变化
    onMounted(() => {
      checkScreenSize()
      window.addEventListener('resize', checkScreenSize)
    })

    onUnmounted(() => {
      window.removeEventListener('resize', checkScreenSize)
    })

    return {
      showService,
      toggleService,
      logo,
      isMobile,
      showMobileMenu,
      toggleMobileMenu,
      closeMobileMenu,
      userRole
    }
  }
}
</script>

<style scoped>
.header-wrapper {
  background: linear-gradient(135deg, #2d3437, #4893c6); /* 蓝色渐变 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
  height: 100px;
  max-width: 100%;
  box-sizing: border-box;
}

.logo {
  display: flex;
  align-items: center;
  position: relative;
}

.logo img {
  height: 60px;
  margin-right: 20px;
}

.logo-text {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff; /* 白色文字 */
  letter-spacing: 1.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: all 0.3s ease;
}

/* 给Logo添加下划线动画效果 */
.logo-text::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ffdd57, transparent);
  transform-origin: left;
  transform: scaleX(0.7);
  transition: transform 0.3s ease;
}

.logo:hover .logo-text::after {
  transform: scaleX(1);
}

.el-menu {
  border-bottom: none;
  font-size: 18px;
}

.el-menu-item {
  transition: color 0.3s ease;
  padding: 0 20px;
  color: #ffffff; /* 白色文字 */
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 6px;
  font-size: 18px;
}

.el-menu-item:hover {
  color: #ffdd57; /* 黄色高亮 */
  background-color: rgba(255, 221, 87, 0.1); /* 黄色背景 */
  border-radius: 4px;
}

.el-menu-item.is-active {
  color: #ffdd57 !important; /* 黄色高亮 */
  background-color: rgba(255, 221, 87, 0.1); /* 黄色背景 */
  border-radius: 4px;
}

/* 历史记录菜单项特殊样式 */
.history-menu-item {
  color: #000000 !important; /* 黑色文字 */
  font-weight: 600; /* 加粗 */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.5); /* 白色文字阴影增加可读性 */
}

.history-menu-item:hover,
.history-menu-item.is-active {
  color: #ffdd57 !important; /* 悬停和选中时保持黄色 */
  text-shadow: none; /* 移除文字阴影 */
}

/* 移动端菜单样式 */
.mobile-menu-toggle {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  z-index: 1001;
}

.mobile-menu {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slide-down 0.3s ease;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu .el-menu {
  width: 100%;
}

.mobile-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
}

/* 客服容器样式 */
.customer-service-container {
  position: fixed;
  left: 20px;
  bottom: 150px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-hint {
  background: rgba(72, 147, 198, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

/* 在线客服图标 */
.online-customer-service {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2d3437, #4893c6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.service-icon {
  font-size: 24px;
  color: #ffffff;
}

.online-customer-service:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.online-customer-service:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}

.tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tooltip:after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.7);
}

/* 呼吸光环效果 */
.pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pulse 2s infinite;
  z-index: -1;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 147, 198, 0.6);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(72, 147, 198, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(72, 147, 198, 0);
  }
}

.footer-content {
  text-align: center;
  color: #333333; /* 深灰色文字 */
  font-size: 14px;
  padding: 20px 0;
}

.footer-content a {
  color: #333333; /* 链接文字颜色为深灰色 */
  text-decoration: none; /* 去除下划线 */
}

.footer-content a:hover {
  color: #4893c6; /* 鼠标悬停时变为主题蓝色 */
  text-decoration: underline; /* 添加下划线提高可点击感 */
}

/* 响应式样式 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 20px;
    height: 70px;
  }

  .logo-text {
    font-size: 22px;
  }

  .customer-service-container {
    left: 15px;
    bottom: 100px;
  }

  .service-hint {
    font-size: 12px;
    padding: 4px 8px;
  }

  .online-customer-service {
    width: 50px;
    height: 50px;
  }

  .service-icon {
    font-size: 20px;
  }

  .footer-content {
    font-size: 12px;
    padding: 15px 10px;
  }

  .footer-content p {
    line-height: 1.5;
  }

  .el-main {
    padding: 15px 10px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: 20px;
  }

  .header-content {
    height: 60px;
  }

  .mobile-menu {
    top: 60px;
  }

  .customer-service-container {
    left: 10px;
    bottom: 80px;
  }

  .online-customer-service {
    width: 45px;
    height: 45px;
  }
}
</style>